<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>始终飞向鼠标的纸飞机</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/feiji.css">
</head>
<body>
    <div id="plane">
        <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </div>
    <script>
         let plane = document.getElementById('plane');
         let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
         window.addEventListener('mousemove',(e)=>{
             ex=e.x-plane.offsetLeft-plane.clientWidth/2;
             ey=e.y-plane.offsetTop-plane.clientHeight/2;
             deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;
             if(ex<0){
                deg+=180;
             }
             count=0;
         })
         function draw(){
             plane.style.transform='rotate('+deg+'deg)';
             if(count<100){
                vx+=ex/100;
                vy+=ey/100;
             }
             plane.style.left=vx+'px';
             plane.style.top=vy+'px';
             count++
         }
         setInterval(draw,1);
    </script>
</body>
</html>